<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">后台管理系统</div>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                <el-form-item prop="phone">
                    <el-input v-model="param.phone" placeholder="请输入手机号码">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="param.password" @keyup.enter.native="submitForm()">
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="forgetPassword" >短信验证码登录</el-button>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()">登录</el-button>
                </div>
            </el-form>
        </div>

        <!-- 手机验证弹出框 -->
        <el-dialog title="手机验证" :visible.sync="validationVisible" width="37%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item >
                    手机号码：<el-input style="width:150px;margin-right:5px" placeholder="请输入手机号码" v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item >
                    验&nbsp;证&nbsp;码&nbsp;：<el-input style="width:150px;margin-right:5px" placeholder="请输入验证码"  v-model="form.validationNumber"></el-input>
                    <span v-if="flag">
                        <el-button type="text" @click="getValidation(form.phone)" >获取验证码</el-button>
                    </span>
                    <span v-else>
                        {{countTime+"秒后可重新输入"}}
                    </span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="validationVisible = false">取 消</el-button>
                <el-button type="primary" @click="runValidation(form.phone)">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    import { login, phoneLogin } from '../../api/login';
    import {exitPhone, resourceData,getValidationCode,checkValidationCode} from '../../api/personal'
    import qs from 'qs';

    export default {
        data: function () {
            return {
                param: {
                    phone: '',
                    password: ''
                },
                rules: {
                    phone: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
                },
                form:{
                    phone:'',
                    validationNumber:''
                },
                validationVisible:false,
                countTime:60,
                flag:true,

                resourceId:[],
                resourceName:[],
                url:[],
                fid:[],
                id:[],
            };
        },
        methods: {
            submitForm() {
                this.$refs.login.validate((valid) => {
                    if (valid) {
                        login(this.param).then((_res) => {
                            var _this = this;

                            if(_res.data.empData!=null)
                            {
                                this.$message.success('登录成功');

                                //不等于null 表用户不是一次登录
                                if(localStorage.getItem('u_time'+_res.data.empData.empId.valueOf()) !=null )
                                {
                                    //新旧时间替换
                                    if( localStorage.getItem('new_time'+_res.data.empData.empId.valueOf())!=null){
                                        let time = localStorage.getItem('new_time'+_res.data.empData.empId.valueOf());
                                        localStorage.setItem('before_time'+_res.data.empData.empId.valueOf(),time)
                                    }
                                    //访问次数增加
                                    if(localStorage.getItem('access')!=null)
                                    {
                                        let a = localStorage.getItem('access');
                                        localStorage.setItem('access',parseInt(a)+1)
                                    }
                                }
                                else
                                {
                                    //用户第一次登录设置上次登录时间为null
                                    localStorage.setItem('before_time'+_res.data.empData.empId.valueOf(),null)
                                }

                                if(_res.data.empData.empId)
                                {
                                    var uTime = 'u'+_res.data.empData.empId.valueOf()+'time';
                                    localStorage.setItem('u_time'+_res.data.empData.empId.valueOf(),uTime)

                                    var value = new Date();
                                    var year = value.getFullYear();
                                    var month = value.getMonth()+1;
                                    month = month.toString().padStart(2,'0')
                                    var day = value.getDate();
                                    var hour = value.getHours();
                                    var minutes = value.getMinutes();
                                    var seconds = value.getSeconds();
                                    var newTime = year+'-'+month+'-'+day+' '+hour+':'+minutes+':'+seconds;
                                    localStorage.setItem('new_time'+_res.data.empData.empId.valueOf(),newTime)
                                    // 第一次登录给定访问次数为1
                                    if(localStorage.getItem('access')==null)
                                    {
                                        var access = 1;
                                        localStorage.setItem('access',access)
                                    }
                                }

                                localStorage.setItem("phone",_res.data.empData.phone)
                                localStorage.setItem('ms_username', _res.data.empData.name);
                                localStorage.setItem("ms_userId",_res.data.empData.empId)
                                localStorage.setItem("ms_password",_res.data.empData.password)
                                localStorage.setItem('ms_roleIds',_res.data.roleName)
                                //用户信息
                                localStorage.setItem('userData',JSON.stringify(_res.data.empData))

                                //localStorage.setItem('token','asdasdasd')

                                resourceData(_res.data.empData.roleIds.valueOf()).then((res)=>{
                                    //用户资源权限信息
                                    console.log(res.data)
                                    localStorage.setItem('resourceData',JSON.stringify(res.data));

                                    for (let i = 0; i < res.data.length; i++) {
                                        //this.resourceId[i] = res.data[i].resourceId;
                                        //this.resourceName[i] = res.data[i].resourceName;
                                        // this.fid[i] = res.data[i].fid;
                                        // this.url[i] = res.data[i].url;
                                        // this.id[i] = res.data[i].id;
                                    }

                                    //localStorage.setItem("r_resourceId",this.resourceId)
                                    //localStorage.setItem("r_resourceName",this.resourceName)
                                    // localStorage.setItem("r_url",this.url)
                                    // localStorage.setItem("r_fid",this.fid)
                                    // localStorage.setItem("r_id",this.id)
                                    localStorage.setItem('photo',_res.data.empData.photo)
                                })

                                this.$router.push('/dashboard');
                            }
                            else{
                                this.$message.error('请输入正确的账号和密码');
                            }
                        });
                    } else {
                        this.$message.error('请输入账号和密码');
                        return false;
                    }
                });
            },
            //获取验证码
            getValidation(phone){
                var ph = /^1[0-9]{10}$/;

                if(phone==null || phone==''){
                    this.$message.warning('请输入你的手机号码');
                }
                else if(!ph.test(phone))
                {
                    this.$message.error('请输入正确的手机号码');
                }
                else{           // 获取
                    exitPhone(phone).then((res)=>{
                        if(res==false)
                        {
                            this.$message.error('该手机号未注册');
                        }
                        else{
                            //发送验证码
                            getValidationCode(phone).then((resp) => {
                                this.$message.success(resp.data);
                            })

                            this.flag = !this.flag;

                            //定时器
                            var time = setInterval(()=>{
                                let { countTime  } = this
                                countTime -- ;
                                this.countTime = countTime

                                if(this.countTime == 0 ){
                                    clearInterval(time)
                                    this.countTime = 60;
                                    this.flag = !this.flag;
                                }
                            },1000)
                        }
                    })

                }
            },
            // 验证码验证
            runValidation(phone){
                this.$refs.form.validate((valid) => {
                    if (valid) {

                        var ph = /^1[0-9]{10}$/;

                        if(phone==null || phone==''){
                            this.$message.warning('请输入你的手机号码');
                        }
                        else if(!ph.test(phone))
                        {
                            this.$message.error('请输入正确的手机号码');
                        }
                        else
                        {
                            phoneLogin(this.form).then((_res) => {
                                var _this = this;
                                if(_res.data.empData!=null)
                                {
                                    this.$message.success('登录成功');

                                    //不等于null 表用户不是一次登录
                                    if(localStorage.getItem('u_time'+_res.data.empData.empId.valueOf()) !=null )
                                    {
                                        //新旧时间替换
                                        if( localStorage.getItem('new_time'+_res.data.empData.empId.valueOf())!=null){
                                            let time = localStorage.getItem('new_time'+_res.data.empData.empId.valueOf());
                                            localStorage.setItem('before_time'+_res.data.empData.empId.valueOf(),time)
                                        }
                                        //访问次数增加
                                        if(localStorage.getItem('access')!=null)
                                        {
                                            let a = localStorage.getItem('access');
                                            localStorage.setItem('access',parseInt(a)+1)
                                        }
                                    }
                                    else
                                    {
                                        //用户第一次登录设置上次登录时间为null
                                        localStorage.setItem('before_time'+_res.data.empData.empId.valueOf(),null)
                                    }

                                    if(_res.data.empData.empId)
                                    {
                                        var uTime = 'u'+_res.data.empData.empId.valueOf()+'time';
                                        localStorage.setItem('u_time'+_res.data.empData.empId.valueOf(),uTime)

                                        var value = new Date();
                                        var year = value.getFullYear();
                                        var month = value.getMonth()+1;
                                        month = month.toString().padStart(2,'0')
                                        var day = value.getDate();
                                        var hour = value.getHours();
                                        var minutes = value.getMinutes();
                                        var seconds = value.getSeconds();
                                        var newTime = year+'-'+month+'-'+day+' '+hour+':'+minutes+':'+seconds;
                                        localStorage.setItem('new_time'+_res.data.empData.empId.valueOf(),newTime)
                                        // 第一次登录给定访问次数为1
                                        if(localStorage.getItem('access')==null)
                                        {
                                            var access = 1;
                                            localStorage.setItem('access',access)
                                        }
                                    }

                                    localStorage.setItem("phone",_res.data.empData.phone)
                                    localStorage.setItem('ms_username', _res.data.empData.name);
                                    localStorage.setItem("ms_userId",_res.data.empData.empId)
                                    localStorage.setItem("ms_password",_res.data.empData.password)
                                    localStorage.setItem('ms_roleIds',_res.data.roleName)
                                    //用户信息
                                    localStorage.setItem('userData',JSON.stringify(_res.data.empData))

                                    //localStorage.setItem('token','asdasdasd')

                                    resourceData(_res.data.empData.roleIds.valueOf()).then((res)=>{
                                        //用户资源权限信息
                                        console.log(res.data)
                                        localStorage.setItem('resourceData',JSON.stringify(res.data));

                                        for (let i = 0; i < res.data.length; i++) {
                                            //this.resourceId[i] = res.data[i].resourceId;
                                            //this.resourceName[i] = res.data[i].resourceName;
                                            // this.fid[i] = res.data[i].fid;
                                            // this.url[i] = res.data[i].url;
                                            // this.id[i] = res.data[i].id;
                                        }

                                        //localStorage.setItem("r_resourceId",this.resourceId)
                                        //localStorage.setItem("r_resourceName",this.resourceName)
                                        // localStorage.setItem("r_url",this.url)
                                        // localStorage.setItem("r_fid",this.fid)
                                        // localStorage.setItem("r_id",this.id)
                                        localStorage.setItem('photo',_res.data.empData.photo)
                                    })

                                    this.$router.push('/dashboard');
                                }
                                else{
                                    this.$message.error('请输入正确的账号和密码');
                                }
                            });
                        }

                    } else {
                        this.$message.error('请输入账号和密码');
                        return false;
                    }
                });
            },
            // 点击忘记密码
            forgetPassword() {
                this.validationVisible = true;
            },
        }
    };
</script>

<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/login-bj.jpg);
        background-size: 100%;
    }
    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }
    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }
    .ms-content {
        padding: 30px 30px;
    }
    .login-btn {
        text-align: center;
    }
    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }
    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }
</style>